<template>
  <div>
    <!-- 准备DOM -->
    <div ref="myChart" style="width: 600px; height: 400px">雷达图</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例(创建实例)
    const myChart = echarts.init(this.$refs.myChart);
    // 绘制图表(画图)
    const option = {
      textStyle: {
        fontSize: 14,
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: "销售（Sales）", max: 6500 },
          { name: "管理（Administration）", max: 16000 },
          { name: "信息技术（Information Technology）", max: 30000 },
          { name: "客服（Customer Support）", max: 38000 },
          { name: "研发（Development）", max: 52000 },
          { name: "市场（Marketing）", max: 25000 },
        ],
      },
      series: [
        {
          name: "预算 vs 开销（Budget vs spending）",
          type: "radar",
          data: [
            {
              value: [4200, 10000, 20000, 30000, 40000, 18000],
              name: "预算分配（Allocated Budget）",
            },
            {
              value: [5000, 14000, 28000, 26000, 42000, 21000],
              name: "实际开销（Actual Spending）",
            },
          ],
        },
      ],
    };

    myChart.setOption(option);
  },
};
</script>
<style>
</style>